<template>
  <div>
    <el-form v-model="fileList">
      <el-upload
      class="upload-demo"
      ref
      :multiple="true"
      action
      :on-remove="handleRemove"
      :on-change="handleChange"
      :file-list="fileList"
      :auto-upload="false"
      :with-credentials="true"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="upload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">一次可选择n个(发1次请求，调用服务端多文件上传接口)--多文件上传</div>
    </el-upload>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "multiFilesUploadDemo2",
  data() {
    return {
      fileList: []
    };
  },

  methods: {
    upload: function() {
      let formData = new FormData();
      this.fileList.forEach(f =>
        formData.append("files", f.raw, f.raw.name)
      );
      debugger
      this.$api.file.uploadFile(formData).then(res => {
        this.fileList = [];
        if (!res) {
          return;
        }

        this.handleSuccess();
      });
    },
    handleRemove: function(file, fileList) {
      this.fileList = fileList;
    },
    handleChange: function(file, fileList) {
      this.fileList = fileList;
    },
    handleSuccess: function() {
      this.$message({
        type: "success",
        message: "文件上传成功"
      });
    }
  }
};
</script>
